<script setup lang="ts" name="Map">
import AMapLoader from "@amap/amap-jsapi-loader"
import { shallowRef } from "vue"

let map = shallowRef(null)

const initMap = () => {
  AMapLoader.load({
    key: "19dc8528ea7b06ffece6e185832dea8c",
    version: "2.0",
    plugins: ["AMap.ToolBar", "AMap.Driving"],
    AMapUI: {
      version: "1.1",
      plugins: []
    },
    Loca: {
      version: "2.0.0"
    }
  })
    .then((AMap) => {
      map.value = new AMap.Map("amap", {
        viewMode: "2D",
        zoom: 5,
        zooms: [2, 22],
        center: [105.602725, 37.076636]
      })
      let positionArr = [
        [113.357224, 34.977186],
        [114.555528, 37.727903],
        [112.106257, 36.962733],
        [109.830097, 31.859027],
        [116.449181, 39.98614]
      ]
      for (let item of positionArr) {
        let marker = new AMap.Marker({
          position: [item[0], item[1]]
        })
        map.value.add(marker)
      }
    })
    .catch((e) => console.log(e))
}
onMounted(() => {
  initMap()
})
</script>
<template>
  <div class="amap-main">
    <div class="amap" id="amap"></div>
  </div>
</template>
<style lang="scss" scoped>
.amap-main {
  width: 100%;
  height: 100%;
}
.amap {
  width: 100%;
  height: 100%;
}
</style>
